<template>
  <div>
    <PlutoTablePrint2
      ref="refPlutoTable"
      :columns="systemTable.columns"
      :table-data="systemTable.tableData"
      :total="systemTable.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @search="handleFilter"
      @selection-change="handleSelectionChange"
      :show-selection="true"
      :show-pagination="true"
      :page-sizes="[5, 10,20, 50,100]"
      :default-page-size="systemTable.filterParams.pageSize"
      :show-index="true"
      @add="handleAddAction"
      :add-button-text="'立案登记'"
    >
      <!-- 自定义操作列 -->
      <template v-slot:action="scope">
        <span @click="handleDetail(scope.row)" style="color: #2979E6;cursor: pointer; margin-right: 10px"> 详情</span>
        <span @click="handleDetail(scope.row)" style="color: #2979E6;cursor: pointer; "> 处理</span>
      </template>
    </PlutoTablePrint2>

    <PlutoDialog
      :visible.sync="dialogFormVisible"
      :config="dialogConfig"
      @confirm="handleConfirmConfigAction"
    >
      <template v-slot:content>
        <el-form ref="registerForm" :model="registerForm">
          <div style="text-align: center;color: #000000;padding: 5px"><span
            style="font-family: SimHei, sans-serif; font-size: 24px;font-weight: 700">重庆市司法局</span>
            <br>
            <span style="font-family: SimHei, sans-serif; font-size: 22px;font-weight: 600">立案审批表</span>
          </div>
          <table width="595px" border="1"
                 style="width: 100%; margin-right: auto; margin-left: auto; border-collapse: collapse;"
                 class="custom-table">
            <tbody>
            <tr style="text-align: center;" v-if="dynamicRegisterForm.includes('lineCode')">
              <td style="width: 23.064%; text-align: center;" colspan="2"><span
                style="font-family: SimHei, sans-serif; font-size: 16px;"><span style="color: #e03e2d;">*</span> 办案条线</span>
              </td>
              <td style="width: 76.936%; text-align: center;" colspan="4">
                <el-select class="custom-select"
                           data-field="lineCode"
                           v-model="registerForm.lineCode"
                           @change="handleLineCodeChange"
                           placeholder="请选择办案条线">
                  <el-option
                    v-for="item in lineCodeSelectList"
                    :key="item.territoryCode"
                    :label="item.territoryName"
                    :value="item.territoryCode"
                  ></el-option>
                </el-select>
              </td>
            </tr>
            <tr style="text-align: center;" v-if="dynamicRegisterForm.includes('caseSource')">
              <td style="width: 23.064%; text-align: center;" colspan="2"><span
                style="font-family: SimHei, sans-serif; font-size: 16px;"> <span style="color: #e03e2d;">*</span> 案件来源</span>
              </td>
              <td style="width: 76.936%;" colspan="4">
                <el-select class="custom-select" data-field="caseSource" v-model="registerForm.caseSource"
                           placeholder="请选择案件来源">
                  <el-option
                    data-field="caseSource"
                    v-for="item in caseSourceSelectList"
                    :key="item.code"
                    :label="item.label"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </td>
            </tr>
            <tr style="text-align: center;" v-if="dynamicRegisterForm.includes('discoveryDate')">
              <td style="width: 23.064%; text-align: center;" colspan="2"><span
                style="font-family: SimHei, sans-serif; font-size: 16px;"> <span style="color: #e03e2d;">*</span> 发现日期</span>
              </td>
              <td style="width: 76.936%;" colspan="4">
                <el-date-picker data-field="discoveryDate" class="custom-select" v-model="registerForm.discoveryDate"
                                type="date"
                                format="yyyy年MM月dd日" value-format="yyyy-MM-dd"
                                placeholder="请选择发现日期"></el-date-picker>
              </td>
            </tr>

            <tr style="text-align: center;" v-if="dynamicRegisterForm.includes('illegalAct')">
              <td style="width: 23.064%; text-align: center;" colspan="2"><span
                style="font-family: SimHei, sans-serif; font-size: 16px;"><span style="color: #e03e2d;">*</span> 违法行为</span>
              </td>
              <td style="width: 76.936%; text-align: center;" colspan="4">
                <el-select class="custom-select" data-field="illegalAct"
                           v-model="registerForm.illegalAct"
                           @change="handleIllegalActChange"
                           placeholder="请选择违法行为">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </td>
            </tr>

            <tr style="text-align: center;" v-if="dynamicRegisterForm.includes('emergencyCase')">
              <td style="width: 23.064%; text-align: center;" colspan="2"><span
                style="font-family: SimHei, sans-serif; font-size: 16px;"><span style="color: #e03e2d;">*</span> 应急案由</span>
              </td>
              <td style="width: 76.936%; text-align: center;" colspan="4">
                <el-select class="custom-select" data-field="emergencyCase"
                           v-model="registerForm.emergencyCase"
                           @change="handleEmergencyCaseChange"
                           placeholder="请选择应急案由">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </td>
            </tr>


            <tr style="text-align: center;"
                v-if="dynamicRegisterForm.includes('publishItems')"
                v-for="(item, index) in publishItemsAction"
                :key="index">
              <td style="width: 23.064%; text-align: center;" colspan="2">
                <p style="text-align: center;">
                <span style="font-family: SimHei, sans-serif; font-size: 16px;">
                  <span style="color: #e03e2d;">*</span> 处罚事项{{ index + 1 }}
                </span>
                  <i
                    style="cursor: pointer;   color: #e03e2d;font-size: 18px;"
                    class="el-icon-remove"
                    @click="removePublishItemAction(index)"
                    v-if="registerForm.publishItems.length > 1 && index !== 0"
                  ></i>

                  <i style="cursor: pointer;  font-size: 18px;"
                     @click="addPublishItemAction(index)"
                     v-if="index === 0"
                     class="el-icon-circle-plus"></i>
                </p>
              </td>
              <td style="width: 76.936%;" colspan="4">
                <el-cascader class="custom-select" :data-field="`publishItems-${index}`" :props="cascaderProps"
                             filterable clearable
                             placeholder="请输入处罚事项"
                             @change="handlePublishItemChange" popper-class="super-force-cascader"
                             v-model="item.itemName" :options="publishListInfoSelectList"></el-cascader>
              </td>
            </tr>
            <tr style="text-align: center;" v-if="dynamicRegisterForm.includes('caseAreaAndCaseDetail')">
              <td style="width: 23.064%; text-align: center;" colspan="2"><span
                style="font-family: SimHei, sans-serif; font-size: 16px;"><span style="color: #e03e2d;">*</span> 案发地</span>
              </td>
              <td style="width: 34.1762%;" colspan="2">
                <el-input class="custom-select" data-field="caseArea" v-model="registerForm.caseArea"
                          placeholder="请输入"></el-input>
              </td>
              <td style="width: 42.7598%;" colspan="2">
                <el-input class="custom-select" data-field="caseDetail" v-model="registerForm.caseDetail"
                          placeholder="请输入"></el-input>
              </td>
            </tr>
            <template v-for="(item, index) in partyListAction" v-if="dynamicRegisterForm.includes('partyList')">
              <template v-if="item.partyType === '1'">
                <tr style="text-align: center;" :key="`person-${index}-1`">
                  <td style="width: 11.7845%;" v-if="index === 0"
                      :rowspan="6 + (partyPersonNumber * 5)">
                    <p style="text-align: center;"><span style="font-size: 16px; color: #e03e2d;">*</span></p>
                    <p style="text-align: center;"><span style="font-size: 16px;">当</span></p>
                    <p style="text-align: center;"><span style="font-size: 16px;">事</span></p>
                    <p style="text-align: center;"><span style="font-size: 16px;">人</span></p>
                  </td>
                  <td style="width: 11.2795%;" rowspan="5">
                    <p style="text-align: center;"><span style="font-size: 16px;">个人</span></p>
                    <p style="text-align: center;"><span style="font-size: 16px;"> </span>
                      <i
                        style="cursor: pointer;  color: #e03e2d;font-size: 18px;"
                        class="el-icon-remove"
                        @click="removePersonAction(index)"
                        v-if="partyListAction.length > 1 && index !== 0"
                      ></i>
                      <i style="cursor: pointer; font-size: 18px;"
                         @click="addPersonAction(index)"
                         v-if="index === 0"
                         class="el-icon-circle-plus"></i>
                    </p>
                  </td>
                  <td style="width: 14.1414%;"><span style="font-size: 16px;">证件类型</span></td>
                  <td style="width: 20.0348%;">
                    <el-select class="custom-select"
                               :data-field="`personIdCardType-${index}`"
                               v-model="item.personIdCardType"
                               placeholder="证件类型">
                      <el-option
                        v-for="item in idCardTypeSelectList"
                        :key="item.paramCode"
                        :label="item.paramValue"
                        :value="item.paramCode"
                      ></el-option>
                    </el-select>
                  </td>
                  <td style="width: 13.6352%;"><span style="font-size: 16px;">证件号码</span></td>
                  <td style="width: 29.1246%;">
                    <el-input class="custom-select" v-model="item.personIdCardNumber"
                              :data-field="`personIdCardNumber-${index}`" placeholder="证件号码"></el-input>
                  </td>
                </tr>
                <tr style="text-align: center;" :key="`person-${index}-2`">
                  <td style="width: 14.1414%;"><span style="font-size: 16px;">姓名</span></td>
                  <td style="width: 20.0348%;">
                    <el-input class="custom-select" :data-field="`personPartyName-${index}`" v-model="item.partyName"
                              placeholder="姓名"></el-input>
                  </td>
                  <td style="width: 13.6352%;"><span style="font-size: 16px;">出生年月</span></td>
                  <td style="width: 29.1246%;">
                    <el-date-picker class="custom-select" :data-field="`personBirthDate-${index}`"
                                    v-model="item.personBirthDate" type="date"
                                    format="yyyy年MM月dd日"
                                    value-format="yyyy-MM-dd" placeholder="出生年月"></el-date-picker>
                  </td>
                </tr>
                <tr style="text-align: center;" :key="`person-${index}-3`">
                  <td style="width: 14.1414%;"><span style="font-size: 16px;">性别</span></td>
                  <td style="width: 20.0348%;">
                    <el-select class="custom-select" :data-field="`personGender-${index}`" v-model="item.personGender"
                               placeholder="性别">
                      <el-option label="男" value="1"></el-option>
                      <el-option label="女" value="0"></el-option>
                    </el-select>
                  </td>
                  <td style="width: 13.6352%;"><span style="font-size: 16px;">联系电话</span></td>
                  <td style="width: 29.1246%;">
                    <el-input class="custom-select" :data-field="`personPartyPhone-${index}`" v-model="item.partyPhone"
                              placeholder="联系电话（非必填）"></el-input>
                  </td>
                </tr>

                <tr style="text-align: center;" :key="`person-${index}-4`">
                  <td style="width: 14.1414%;"><span style="font-size: 16px;">住址</span></td>
                  <td style="width: 20.0348%;">
                    <el-input class="custom-select" :data-field="`personPartyAddress-${index}`"
                              v-model="item.partyAddress" placeholder="住址"></el-input>
                  </td>
                  <td style="width: 13.6352%;"><span style="font-size: 16px;">详细地址</span></td>
                  <td style="width: 29.1246%;">
                    <el-input class="custom-select" :data-field="`personPartyDetailAddress-${index}`"
                              v-model="item.partyDetailAddress" placeholder="详细地址"></el-input>
                  </td>
                </tr>
                <tr style="text-align: center;" :key="`person-${index}-5`">
                  <td style="width: 14.1414%;"><span style="font-size: 16px;">工作单位</span></td>
                  <td style="width: 62.7946%;" colspan="3">
                    <el-input class="custom-select" :data-field="`personWorkUnit-${index}`"
                              v-model="item.personWorkUnit"
                              placeholder="工作单位（非必填）"></el-input>
                  </td>
                </tr>
              </template>
              <template v-if="item.partyType === '2'">
                <tr style="text-align: center;" :key="`legal-${index}-1`">
                  <td style="width: 11.2795%;" rowspan="6">
                    <p style="text-align: center;"><span style="font-size: 16px;">单位</span></p>
                  </td>
                  <td style="width: 14.1414%;"><span style="font-size: 16px;">名称</span></td>
                  <td style="width: 62.7946%;" colspan="3">
                    <el-input class="custom-select" :data-field="`legalPartyName-${index}`" v-model="item.partyName"
                              placeholder="请输入单位名称"></el-input>
                  </td>
                </tr>
                <tr style="text-align: center;" :key="`legal-${index}-2`">
                  <td style="width: 14.1414%;">
                    <span style="font-size: 16px;">法定代表人或负责人</span>
                  </td>
                  <td style="width: 20.0348%;">
                    <el-input class="custom-select" :data-field="`legalRepresentative-${index}`"
                              v-model="item.legalRepresentative" placeholder="法定代表人或负责人"></el-input>
                  </td>
                  <td style="width: 13.6352%;"><span style="font-size: 16px;">职务</span></td>
                  <td style="width: 29.1246%;">
                    <el-input class="custom-select" :data-field="`legalPosition-${index}`" v-model="item.legalPosition"
                              placeholder="职务（非必填）"></el-input>
                  </td>
                </tr>
                <tr style="text-align: center;" :key="`legal-${index}-3`">
                  <td style="width: 14.1414%;">
                    <span style="font-size: 16px;">法定代表人或负责人证件</span>
                  </td>
                  <td style="width: 20.0348%;">
                    <el-select class="custom-select"
                               :data-field="`legalIdCardType-${index}`"
                               v-model="item.legalIdCardType"
                               placeholder="证件类型">
                      <el-option
                        v-for="item in idCardTypeSelectList"
                        :key="item.paramCode"
                        :label="item.paramValue"
                        :value="item.paramCode"
                      ></el-option>
                    </el-select>

                  </td>
                  <td style="width: 13.6352%;"><span style="font-size: 16px;">证件号码</span></td>
                  <td style="width: 29.1246%;">
                    <el-input class="custom-select" :data-field="`legalIdCardNumber-${index}`"
                              v-model="item.legalIdCardNumber" placeholder="证件号码"></el-input>
                  </td>
                </tr>
                <tr style="text-align: center;" :key="`legal-${index}-4`">
                  <td style="width: 14.1414%;">
                    <span style="font-size: 16px;">统一社会信用代码</span>
                  </td>
                  <td style="width: 20.0348%;">
                    <el-input class="custom-select" :data-field="`legalUniCode-${index}`" v-model="item.legalUniCode"
                              placeholder="统一社会信用代码"></el-input>
                  </td>
                  <td style="width: 13.6352%;"><span style="font-size: 16px;">联系电话</span></td>
                  <td style="width: 29.1246%;">
                    <el-input class="custom-select" :data-field="`legalPartyPhone-${index}`" v-model="item.partyPhone"
                              placeholder="联系电话（非必填）"></el-input>
                  </td>
                </tr>
                <tr style="text-align: center;" :key="`legal-${index}-5`">
                  <td style="width: 14.1414%;"><span style="font-size: 16px;">住所</span></td>
                  <td style="width: 62.7946%;" colspan="3">
                    <el-input class="custom-select" :data-field="`legalPartyDetailAddress-${index}`"
                              v-model="item.partyDetailAddress" placeholder="住所"></el-input>
                  </td>
                </tr>
                <tr style="text-align: center;" :key="`legal-${index}-6`">
                  <td style="width: 14.1414%;"><span style="font-size: 16px;">单位类型</span></td>
                  <td style="width: 62.7946%;" colspan="3">
                    <el-radio v-model="item.legalUnitType" label="1">法人</el-radio>
                    <el-radio v-model="item.legalUnitType" label="2">个体工商户</el-radio>
                    <el-radio v-model="item.legalUnitType" label="3">其他组织</el-radio>
                  </td>
                </tr>
              </template>


            </template>

            <tr style="text-align: center;" v-if="dynamicRegisterForm.includes('caseName')">
              <td style="width: 23.064%; text-align: center;" colspan="2"><span
                style="font-family: SimHei, sans-serif; font-size: 16px;"><span style="color: #e03e2d;">*</span> 案件名称</span>
              </td>
              <td style="width: 76.936%; text-align: center;" colspan="4">
                <el-input type="textarea" data-field="caseName" maxlength="300" :rows="3" show-word-limit=""
                          class="custom-select"
                          v-model="registerForm.caseName"
                          placeholder="请先填写上方的案件来源、发现日期、处罚事项、案发地、当事人，填写后自动生成案件名称"></el-input>
              </td>
            </tr>
            <tr style="text-align: center;" v-if="dynamicRegisterForm.includes('caseDesc')">
              <td style="width: 23.064%; text-align: center;" colspan="2">
                <p><span style="color: #e03e2d;">*</span> <span> 请输入案件</span></p>
                <p><span>简要情况</span></p>
              </td>
              <td style="width: 76.936%; text-align: center;" colspan="4">
                <el-input type="textarea" maxlength="5000" :rows="5" show-word-limit="" class="custom-select"
                          v-model="registerForm.caseDesc" data-field="caseDesc"
                          placeholder="请先填写上方的案件来源、发现日期、处罚事项、案发地、当事人，填写后自动生成案件简要情况"></el-input>
              </td>
            </tr>
            </tbody>
          </table>
        </el-form>
      </template>
    </PlutoDialog>
  </div>
</template>

<!-- script 部分保持不变 -->

<script>
import PlutoTablePrint2 from "@/components/PlutoTablePrint/PlutoTablePrint2.vue";
import * as api from './api'
import PlutoDialog from "@/components/PlutoDialog/PlutoDialog.vue";

export default {
  components: {
    PlutoDialog,
    PlutoTablePrint2
  },
  data() {
    return {
      radio: 1,
      registerForm: {
        lineCode: '',
        caseSource: '',
        discoveryDate: '',
        publishItems: [],
        caseArea: '',
        caseDetail: '',
        caseName: '',
        caseDesc: '',
        partyList: []
      },
      partyPersonNumber: 0,
      lineCodeSelectList: [],
      caseSourceSelectList: [],
      publishListInfoSelectList: [],
      idCardTypeSelectList: [],
      cascaderProps: {
        value: 'listInfoCode',     // 对应 listInfoCode 字段
        label: 'listInfoName',     // 对应 listInfoName 字段
        children: 'children',      // 对应 children 字段
        checkStrictly: false,       // 可以选择任意一级
        emitPath: false            // 只返回最后一级的值
      },
      dialogFormVisible: false,
      dialogConfig: {
        title: '立案审批表',
        width: '850px',
        contentHeight: '750',
        top: '20px'
      },

      systemTable: {
        title: '案件管理',
        columns: [
          {prop: 'uid', label: '案件uid', width: '240', isSearch: true, type: 'input'},
          {prop: 'caseName', label: '案件名称', isSearch: true, type: 'input'},
          {prop: 'caseNumber', label: '案件编号', isSearch: false, type: 'input'},
          {
            prop: 'type',
            label: '案件类型',
            isSearch: true,
            type: 'select',
            dataSource: [
              {key: '1', value: '简易程序'},
              {key: '2', value: '普通程序'}
            ]
          },
          {prop: 'createTime', label: '创建时间', isSearch: true, type: 'date', width: '140'},
          {prop: 'updateTime', label: '编辑时间', isSearch: true, type: 'date_interval', width: '140'},
          {
            prop: 'action',
            label: '操作',
            width: '100',
            align: 'center',
            slot: 'action'
          }
        ],
        tableData: [],
        total: 0,
        filterParams: {
          pageNum: 1,
          pageSize: 5,
        }

      },
    }
  },
  computed: {
    dynamicRegisterForm() {
      const arr = ['lineCode', 'caseSource', 'discoveryDate', 'publishItems', 'caseAreaAndCaseDetail', 'caseName', 'caseDesc', 'partyList']
      if (this.registerForm.lineCode === "A058") {
        //违法行为
        arr.push("illegalAct")
      } else if (this.registerForm.lineCode === "A024") {
        //  应急案由
        arr.push("emergencyCase")
      } else if (this.registerForm.lineCode === "3") {
        // 下拉框类型显示的项
        return ['lineCode', 'caseSource', 'discoveryDate', 'publishItems', 'caseAreaAndCaseDetail', 'caseName', 'caseDesc', 'partyList'];
      }
      return arr;
    },
    partyListAction() {
      const partyPersonList = this.registerForm.partyList.filter(item => item.partyType === '1');
      if (partyPersonList.length === 0) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.partyPersonNumber++
        this.registerForm.partyList.push(this.createEmptyParty('1'));
      }
      const partyLegalList = this.registerForm.partyList.filter(item => item.partyType === '2');
      if (partyLegalList.length === 0) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.registerForm.partyList.push(this.createEmptyParty('2'));
      }
      return this.registerForm.partyList;
    },

    publishItemsAction() {
      const partyPersonList = this.registerForm.publishItems;
      if (partyPersonList.length === 0) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.registerForm.publishItems.push({"itemName": ""});
        return this.registerForm.publishItems;
      }
      return partyPersonList;
    }


  },
  watch: {
    'registerForm.lineCode': {
      handler(newVal, oldVal) {
        console.log('lineCode变化:', oldVal, '->', newVal);
        if (newVal && newVal !== oldVal) {
          this.publishListInfoList(newVal);
          this.caseSourceList(newVal);
        }
      },
      immediate: false
    }
  },

  mounted() {
    this.pageTableList();
  },
  methods: {

    createEmptyParty(partyType) {
      return {
        uid: "",
        caseId: "",
        partyType: partyType,
        partyName: "",
        partyPhone: "",
        partyAddress: "",
        partyDetailAddress: "",
        personIdCardType: "",
        personIdCardNumber: "",
        personBirthDate: null,
        personGender: '',
        personWorkUnit: "",
        legalRepresentative: "",
        legalPosition: "",
        legalIdCardType: "",
        legalIdCardNumber: "",
        legalUniCode: "",
        legalUnitType: "1",
      };
    },


    handleAddAction() {
      this.resetValidationStyles();

      this.dialogFormVisible = true;
      this.configParamMainSelectList()
      this.systemParamListIdCardType()

      console.log('新增案件')
    },
    // 条线选择后触发
    handleLineCodeChange(value) {

    },
    // A058违法行为
    handleIllegalActChange() {

    },
    //A024 应急案由
    handleEmergencyCaseChange() {

    },
    handlePublishItemChange(value) {
      console.log('选中的数据:', value);
    },


    // 分页大小变化
    handleSizeChange(requestParams) {
      this.systemTable.filterParams.pageSize = requestParams.pageSize;
      this.systemTable.filterParams.pageNum = 1;
      this.pageTableList();
    },
    // 当前页变化
    handleCurrentChange(requestParams) {
      console.log(requestParams)
      this.systemTable.filterParams.pageNum = requestParams.pageNum;
      this.pageTableList();
    },
    handleSelectionChange(selection) {
      console.log('选中的数据:', selection);
      // 处理选中的数据
    },

    // 筛选处理
    handleFilter(requestParams) {
      console.log(requestParams)
      this.systemTable.filterParams = {
        ...this.systemTable.filterParams,
        ...requestParams
      };
      this.systemTable.filterParams.pageNum = 1;
      this.pageTableList();
    },
    handleDetail(row) {
      // 新标签页打开
      const routeData = this.$router.resolve({
        path: '/case/detail',
        query: {uid: row.uid}
      });
      window.open(routeData.href, '_blank');
    },


    pageTableList() {
      console.log(this.systemTable.filterParams)
      api.pageList(this.systemTable.filterParams).then(res => {
        if (200 === res.code) {
          this.loading = true;
          this.systemTable.tableData = res.data.list;
          this.systemTable.total = res.data.total;
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    caseSourceList() {
      api.caseSourceByLineCode(this.registerForm.lineCode).then(res => {
        if (200 === res.code) {
          this.loading = true;
          this.caseSourceSelectList = res.data;
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    publishListInfoList() {
      api.publishListInfoList(this.registerForm.lineCode).then(res => {
        if (200 === res.code) {
          this.loading = true;
          this.publishListInfoSelectList = res.data;
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    systemParamListIdCardType() {
      api.systemParamListIdCardType("CERT_TYPE").then(res => {
        if (200 === res.code) {
          this.loading = true;
          this.idCardTypeSelectList = res.data;
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },


    configParamMainSelectList() {
      console.log(this.systemTable.filterParams)
      api.configParamMainList().then(res => {
        if (200 === res.code) {
          this.loading = true;
          this.lineCodeSelectList = res.data;
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 添加处罚事项
    addPublishItemAction() {
      this.registerForm.publishItems.push({"itemName": "", "illegalBasis": "", "publishBasis": ""});
    },
    // 删除处罚事项
    removePublishItemAction(index) {
      this.registerForm.publishItems.splice(index, 1);
    },

    addPersonAction() {
      this.partyPersonNumber++
      // 在倒数第二个位置添加个人当事人
      const insertIndex = Math.max(0, this.registerForm.partyList.length - 1);
      this.registerForm.partyList.splice(insertIndex, 0, this.createEmptyParty('1'));
    },
    removePersonAction(index) {
      this.partyPersonNumber--
      this.registerForm.partyList.splice(index, 1);
    },
    handleConfirmConfigAction() {
      if (this.validateRegisterForm()) {
        // 表单验证通过，执行提交逻辑
        console.log('表单验证通过，可以提交');
        this.$message.success('表单验证通过');
        // 这里添加实际的提交逻辑
      } else {
        this.$message.error('请完善表单信息');
        // 可以添加滚动到第一个错误字段的逻辑
        // this.scrollToFirstError();
      }
    },

    validateRegisterForm() {
      let isValid = true;

      // 重置所有错误样式
      this.resetValidationStyles();

      // 验证办案条线
      if (!this.registerForm.lineCode) {
        this.setFieldError('lineCode');
        isValid = false;
      }

      // 验证案件来源
      if (!this.registerForm.caseSource) {
        this.setFieldError('caseSource');
        isValid = false;
      }

      // 验证发现日期
      if (!this.registerForm.discoveryDate) {
        this.setFieldError('discoveryDate');
        isValid = false;
      }

      // 验证违法行为（当条线为 A058 时）
      if (this.registerForm.lineCode === "A058" && !this.registerForm.illegalAct) {
        this.setFieldError('illegalAct');
        isValid = false;
      }

      // 验证应急案由（当条线为 A024 时）
      if (this.registerForm.lineCode === "A024" && !this.registerForm.emergencyCase) {
        this.setFieldError('emergencyCase');
        isValid = false;
      }

      // 验证处罚事项
      if (this.registerForm.publishItems && this.registerForm.publishItems.length > 0) {
        this.registerForm.publishItems.forEach((item, index) => {
          if (!item.itemName || item.itemName.length === 0) {
            this.setFieldError(`publishItems-${index}`);
            isValid = false;
          }
        });
      } else {
        isValid = false;
      }


      // 验证案发地
      if (!this.registerForm.caseArea) {
        this.setFieldError('caseArea');
        isValid = false;
      }

      // 验证案发地
      if (!this.registerForm.caseDetail) {
        this.setFieldError('caseDetail');
        isValid = false;
      }

      // 验证案件名称
      if (!this.registerForm.caseName) {
        this.setFieldError('caseName');
        isValid = false;
      }

      // 验证案件简要情况
      if (!this.registerForm.caseDesc) {
        this.setFieldError('caseDesc');
        isValid = false;
      }

      // 验证当事人信息
      if (this.registerForm.partyList && this.registerForm.partyList.length > 0) {
        this.registerForm.partyList.forEach((party, partyIndex) => {
          if (party.partyType === '1') { // 个人
            if (!party.personIdCardType) {
              this.setFieldError(`personIdCardType-${partyIndex}`);
              isValid = false;
            }
            if (!party.personIdCardNumber) {
              this.setFieldError(`personIdCardNumber-${partyIndex}`);
              isValid = false;
            }
            if (!party.partyName) {
              this.setFieldError(`personPartyName-${partyIndex}`);
              isValid = false;
            }
            if (!party.personBirthDate) {
              this.setFieldError(`personBirthDate-${partyIndex}`);
              isValid = false;
            }
            if (!party.personGender) {
              this.setFieldError(`personGender-${partyIndex}`);
              isValid = false;
            }
            if (!party.partyPhone) {
              this.setFieldError(`personPartyPhone-${partyIndex}`);
              isValid = false;
            }
            if (!party.partyAddress) {
              this.setFieldError(`personPartyAddress-${partyIndex}`);
              isValid = false;
            }

            if (!party.partyDetailAddress) {
              this.setFieldError(`personPartyDetailAddress-${partyIndex}`);
              isValid = false;
            }
            if (!party.personWorkUnit) {
              this.setFieldError(`personWorkUnit-${partyIndex}`);
              isValid = false;
            }
          } else if (party.partyType === '2') { // 单位
            if (!party.partyName) {
              this.setFieldError(`legalPartyName-${partyIndex}`);
              isValid = false;
            }
            if (!party.legalRepresentative) {
              this.setFieldError(`legalRepresentative-${partyIndex}`);
              isValid = false;
            }
            if (!party.legalPosition) {
              this.setFieldError(`legalPosition-${partyIndex}`);
              isValid = false;
            }
            if (!party.partyPhone) {
              this.setFieldError(`legalPartyPhone-${partyIndex}`);
              isValid = false;
            }

            if (!party.legalIdCardType) {
              this.setFieldError(`legalIdCardType-${partyIndex}`);
              isValid = false;
            }
            if (!party.legalIdCardNumber) {
              this.setFieldError(`legalIdCardNumber-${partyIndex}`);
              isValid = false;
            }
            if (!party.legalUniCode) {
              this.setFieldError(`legalUniCode-${partyIndex}`);
              isValid = false;
            }
            if (!party.partyDetailAddress) {
              this.setFieldError(`legalPartyDetailAddress-${partyIndex}`);
              isValid = false;
            }
          }
        });
      } else {
        isValid = false;
      }

      return isValid;
    },
// 设置字段错误样式
    setFieldError(fieldName) {
      this.$nextTick(() => {
        // 查找所有包含 custom-select 类且有对应 data-field 属性的元素
        const elements = document.querySelectorAll(`.custom-select[data-field="${fieldName}"]`);
        elements.forEach(element => {
          // 直接修改 custom-select 元素下的输入框边框
          const inputInner = element.querySelector('.el-input__inner');
          const textareaInner = element.querySelector('.el-textarea__inner');
          if (inputInner) {
            inputInner.style.setProperty('border-bottom', '1px solid red', 'important');
          }
          if (textareaInner) {
            textareaInner.style.setProperty('border-bottom', '1px solid red', 'important');
          }
          // 添加错误类名用于后续样式处理
          element.classList.add('field-error');
        });

        // 找到实际的 input 元素
        const inputElements = document.querySelectorAll(`input[data-field="${fieldName}"], textarea[data-field="${fieldName}"]`);
        inputElements.forEach(input => {
          // 1. 直接设置 input 样式
          input.style.borderBottom = '1px solid red';
          input.style.setProperty('border-bottom', '1px solid red', 'important');
          input.classList.add('field-error');

          // 2. 找到父级 .custom-select 容器并添加错误类
          const parentContainer = input.closest('.custom-select');
          if (parentContainer) {
            parentContainer.classList.add('field-error');
          }
        });


      });
    },

    // 重置所有验证样式
    resetValidationStyles() {
      this.$nextTick(() => {
        // 移除所有错误样式
        const errorElements = document.querySelectorAll('.custom-select.field-error');
        errorElements.forEach(element => {
          const inputInner = element.querySelector('.el-input__inner');
          const textareaInner = element.querySelector('.el-textarea__inner');

          if (inputInner) {
            inputInner.style.setProperty('border-bottom', '1px solid #000000', 'important');
          }
          if (textareaInner) {
            textareaInner.style.setProperty('border-bottom', '1px solid #000000', 'important');
          }

          element.classList.remove('field-error');
        });
      });
    },
  }
}
</script>
<style>
.el-cascader-menu {
  max-width: 700px !important;
  flex: none !important;
  border-right: 1px solid #E4E7ED;
}
</style>

<style scoped>

.custom-table td {
  padding: 10px 5px;
  vertical-align: middle;
}

/* 只设置字体大小，其他保持默认 */
.custom-table ::v-deep * {
  font-size: 16px;
}

.custom-select {
  cursor: pointer;
  color: #000000;
  border: none !important;
  width: 100%;
}

.custom-select ::v-deep .el-input__inner {
  border: none !important;
  border-bottom: 1px solid #000000 !important;
  border-radius: 0 !important;
  background: transparent;
}

.custom-select ::v-deep .el-textarea__inner {
  border: none !important;
  border-bottom: 1px solid #000000 !important;
  border-radius: 0 !important;
  background: transparent;
}


/* 隐藏标题栏 */
.no-header-dialog .el-dialog__header {
  display: none !important;
}

/* 调整内容区域的上边距 */
.no-header-dialog .el-dialog__body {
  padding-top: 20px !important;
}

.custom-dialog .el-dialog__body {
  padding: 10px 20px;
}

.custom-dialog .el-dialog__footer {
  padding: 0;
}


</style>
